<template>
    <div class="layui-layout layui-layout-admin">
        <slidebar></slidebar>
        <div class="layui-body">
            <div class="second-nav">
                <a href="">赞助商</a> - 
                <a href="javascript:;">新建</a>
            </div>
            <div class="layui-content">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required-sign">*</span>赞助商名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入赞助商名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">赞助商logo：</label>
                        <div class="layui-img">
                            <ul>
                                <li v-for="(item,index) in images" :key="index">
                                    <a href="javascript:void(0);">
                                        <img :src="item" alt="" width="60" height="60">
                                    </a>
                                    <a class="delete-img small" data-id="" title="删除" @click="deleteImg(index)">×</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);" class="js-add-img add-img">
                                        <input type="file" id="upfile" name="upfile" accept="image/*" @change="upFile()">
                                        <span>添加图片</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div style="padding:10px 110px;">推荐尺寸：116*116px，大小不超过3M</div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label"><span class="required-sign">*</span>赞助商介绍：</label>
                        <div class="layui-input-block" style="width:800px">
                            <textarea id="demo" style="display: none;"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关联小程序：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="关联后，前台奖励详情提供自己小程序跳转入口" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关联公众号：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="关联后，前台奖励详情提供自己小程序信息" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import slidebar from '../components/slidebar'
export default {
  name: '',
  data () {
    return {
      images:[]
    }
  },
  components:{
      slidebar:slidebar
  },
  mounted(){
    layui.use('layedit', function(){
        var layedit = layui.layedit;
        layedit.build('demo'); //建立编辑器
    });
    layui.use('form', function(){
		var form = layui.form;
		//从文档上复制的好像没有这句
		form.render();
		  
		//监听提交
		form.on('submit(formDemo)', function(data){
		    layer.msg(JSON.stringify(data.field));
		    return false;
		});
	});
  },
  created(){
  },
  methods:{
      deleteImg(index){
        this.images.splice(index,1)
      },
      upFile(){
          var that = this
          var reads= new FileReader();
        var f=document.getElementById('upfile').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            that.images.push(this.result)
        };
      }
  }
}

</script>
<style scoped>
    .layui-form-label{
        width: 90px;
    }
    .layui-body{
        padding: 0 10px
    }
    .second-nav{
        padding: 10px 0;
        border-bottom: 1px solid #666666
    }
    .layui-content{
        padding-left: 100px;
        padding-top: 40px
    }
    .layui-input{
        width: 400px;
    }
    .layui-img{
        margin-left: 110px;
    }
    .layui-img ul{
        overflow: hidden;
        padding: 5px 0;
    }
    .layui-img li{
        float: left;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        margin-right: 20px;
        position: relative;
    }
    .layui-img .add-img{
        color: #009688;
        font-size: 14px;
        position: relative;
    }
    #upfile{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    .layui-img .delete-img{
        position: absolute;
        top: -6px;
        right: -6px;
        z-index: 100;
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 20px;
        border-radius: 50%;
        background-color: rgba(153,153,153,0.6);
    }
    .required-sign{
        color: red
    }
</style>